<template>
  <div class="main-wrap">
    <div class="main-container">
      <div class="main-cz">
        <div class="main-bg">
        </div>
        <div class="login-wrap">
          <h3>至诚<span class="orange">就业</span>管理平台</h3>
          <div class="form-wrap">
            <el-form ref="formRef" :rules="rules" :model="form">
              <el-form-item prop="username">
                <el-input v-model="form.username" size="large" :prefix-icon="User" placeholder="请输入手机号"/>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="form.password" size="large" :prefix-icon="Key" placeholder="请输入密码"/>
              </el-form-item>
              <!--              <el-form-item prop="code">-->
              <!--                <el-input v-model="form.code" size="large" :prefix-icon="Iphone" placeholder="请输入验证码"-->
              <!--                          style="width: 180px;"/>-->
              <!--                <img v-if="captcha" :src="captcha" :style="captchaStyle" @click="changeCaptcha" alt="验证码"/>-->
              <!--              </el-form-item>-->

              <div style="text-align: right;margin-bottom: 15px;">
                <a href="###" style="color: #909399;font-size: 14px;">忘记密码？</a>
              </div>
              <el-form-item>
                <el-button type="primary" size="large" style="width: 100%;" @click="submitForm(formRef)">提交
                </el-button>
              </el-form-item>
            </el-form>
            <div style="text-align: center;">
              <a href="/company/register/first" style="color: #409EFF;font-size: 14px;">用人单位注册</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>
<script setup>
import {ref, reactive} from 'vue';
import {User, Key, Iphone} from '@element-plus/icons-vue';
import {getCaptcha} from '@/api/company/common';
import {} from '@/api/geetest/index.js'
import {login} from '@/api/company/login';
import {ElMessage} from 'element-plus';
import {useScriptTag} from '@vueuse/core'
import {registerGeetest} from '@/api/geetest/index.js'


const jsPath = new URL('@/assets/js/gt.js', import.meta.url).href;
//console.log(jsPath);
useScriptTag(jsPath);



const form = reactive({
  uuid: '',
  username: '',
  password: '',
  code: ''
});

const rules = reactive({
  username: [
    {required: true, message: '请输入手机号', trigger: 'blur'},
    {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '请输入登入密码', trigger: 'blur'},
    {min: 8, max: 20, message: '登入密码长度不符合要求', trigger: 'blur'}
  ],
  code: [
    {required: true, message: '验证码不能为空', trigger: 'blur'},
  ]
});

/** 表单 */
const formRef = ref(null);


/** 图形验证码 */
const captcha = ref('');

/** 图形验证码样式 */
const captchaStyle = ref({});


/** 获取图形验证码 */
const changeCaptcha = () => {
  getCaptcha()
      .then((data) => {
        console.log(data);
        //captcha.value = `data:image/gif;base64,${data.img}`;
        captcha.value = `${data.data.img}`;
        captchaStyle.value = {
          // transform: `scaleX(1.${Math.floor(Math.random() * (0 - 5) + 5)}) skewX(-${Math.floor(Math.random() * (0 - 30) + 30)}deg) scale(1.04)`,
          // filter: `contrast(200%) hue-rotate(${Math.floor(Math.random() * (0 - 360) + 360)}deg)`
        };
        form.uuid = data.uuid;
        formRef.value?.clearValidate?.();
      })
      .catch((e) => {
        ElMessage.error(e.message);
        //console.log(e.message);
        // EleMessage.error({message: e.message, plain: true});
      });
};


const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {


      //验证验证码


      //极验证


    } else {
      if (fields) {
        Object.keys(fields).forEach(key => {
          if (fields[key].length > 0) {
            fields[key].forEach(element => {
              ElMessage.error(element.message);
            });
          }
        });
      }
      console.log('error submit!', fields)
    }
  })
}


//初始化验证码
// changeCaptcha();

registerGeetest().then(res => {
  console.log(res);
  let resp = res.msg;
  let respObj = JSON.parse(resp);


  // //初始化极验证
  // initGeetest({
  //   gt: respObj.gt,
  //   challenge: respObj.challenge,
  //   new_captcha: respObj.new_captcha, // 用于宕机时表示是新验证码的宕机
  //   offline: !respObj.success, // 表示用户后台检测极验服务器是否宕机，一般不需要关注
  //   product: "float", // 产品形式，包括：float，popup
  //   width: "100%"
  // }, function (captchaObj) {
  //   //这边是初始化成功的回调函数
  //   //初始化提交按钮
  //   // that.captchaObj = captchaObj;
  //   $("#submit").click(function (e) {
  //     let result = captchaObj.getValidate();
  //     if (!result) {
  //       //提示请先完成验证
  //       that.$message.error('请先完成人机验证');
  //       e.preventDefault();
  //       return;
  //     }
  //     //console.log('极验证验证结果：', result);
  //     //console.log(typeof (result));
  //     this.loading = true;
  //     let validateObj = {
  //       geetest_challenge: result.geetest_challenge,
  //       geetest_validate: result.geetest_validate,
  //       geetest_seccode: result.geetest_seccode,
  //     };
  //     //发起二次验证，交换票据
  //     validate(validateObj).then(response => {
  //       // console.log(response);
  //       that.token = response.data.msg;
  //       // console.log(this.token);
  //       that.loading = false;
  //       that.$refs["form"].validate(valid => {
  //         if (valid) {
  //           that.getList(captchaObj);
  //         }
  //       });
  //     });
  //     //提交表单
  //     //显示弹出层//发起请求
  //   });
  //   captchaObj.appendTo("#captcha");
  //   captchaObj.onReady(function () {
  //     $("#wait").hide();
  //   });
  // });
})

</script>

<style scoped>

html, body {
  height: 100% !important;
}

.main-wrap {
  height: 100%;
  width: 100%;
}

.main-container {
  width: 1200px;
  /*padding: 70px 0;*/
  margin: auto;
  height: 608px;
}

.main-cz {
  width: 1200px;
  height: 437px;
  position: absolute;
  top: 50%; /*偏移*/
  margin-top: -219px;
}


.main-bg {
  width: 720px;
  height: 437px;
  background: url('/images/login-main-bg.png') 50%/cover no-repeat;
  background-size: 600px;
  float: left;
}


.login-wrap {
  float: right;
  width: 380px;
  height: 330px;
  margin-top: 20px;
  padding-top: 42px;
  border-radius: 4px;
  -webkit-box-shadow: 0 0 42px #ddd;
  box-shadow: 0 0 42px #ddd;
  background-color: #fff;

}

.login-wrap h3 {
  margin: 0;
  line-height: 40px;
  font-size: 28px;
  text-align: center;
  font-weight: 500;
}

.login-wrap h3 .orange {
  color: #ff6644;
}

.form-wrap {
  margin-top: 30px;
  padding-left: 40px;
  padding-right: 40px;
}

.form-wrap .lab {
  font-size: 15px;
  margin-bottom: 5px;
  color: #333333;
}

.layui-form-item {
  position: relative;
}


.layui-form-item .phone-label {
  position: absolute;
  left: 1px;
  top: 1px;
  width: 38px;
  line-height: 88px;
  text-align: center;
  color: #d2d2d2;
}


.layui-form-item .code-lable {
  position: absolute;
  left: 1px;
  width: 38px;
  line-height: 88px;
  text-align: center;
  color: #d2d2d2;
  top: -25px;
}

.layui-form-item input {
  padding-left: 36px;
}

.margin-top15 {
  margin-top: 15px;
}


.captcha_input {
  width: 180px;
}

.captcha_img {
  position: absolute;
  right: 0px;
  top: 25px;
}
</style>

